<template>
  <div class="form-process-todo-list">
    <el-radio-group class="type-radio-wrapper" v-model="type" size="large">
      <el-radio-button label="all">
        全部 ( 5 )
      </el-radio-button>
      <el-radio-button label="expireTime">
        超期 ( 5 )
      </el-radio-button>
      <el-radio-button label="timeoutWithWeek">
        七天内超期 ( 5 )
      </el-radio-button>
      <el-radio-button label="currentDepart">
        本部门的 ( 5 )
      </el-radio-button>
    </el-radio-group>

    <div class="form-process-todo-button-wrapper">
      <el-text>流程标题:</el-text>
      <el-input v-model="searchParams.title" placeholder="请输入流程标题" style="width: 150px; margin: 0 10px" round/>
      <el-button icon="search" round type="primary" @click="searchDatas">搜索</el-button>
      <el-button icon="reload" round @click="resetQueryParams">重置</el-button>
      <el-button icon="remove" round type="warning" @click="removeUserTaskByIds"
                 :disabled="isEmpty(selectedRows)">删除</el-button>
    </div>

    <div class="table-wrapper">
      <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="toApprove"
                :data="toDoList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                class="form-process-todo-list-table" v-loading="loading">
        <el-table-column type="selection" width="40"/>
        <el-table-column show-overflow-tooltip sortable prop="title" label="标题"/>
        <el-table-column show-overflow-tooltip sortable prop="userTaskName" label="当前节点"/>
        <el-table-column show-overflow-tooltip sortable prop="createTime" label="接收时间"/>
        <el-table-column show-overflow-tooltip sortable prop="sponsorUsername" label="发起人"/>
        <el-table-column show-overflow-tooltip sortable prop="sponsorTime" label="发起时间"/>
        <el-table-column show-overflow-tooltip sortable prop="formShowName" label="单据名称"/>
      </el-table>
    </div>

    <div class="form-process-todo-footer">
      <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="pageOptions"
          background layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total" small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import './style.css';
import {deleteAction, getAction} from '@/request/BaseRequest';
import {getViewActionId, isEmpty, pageOptions, resolveOrderConfig} from '@/utils/CommonUtils';
import {ElMessageBox} from 'element-plus';

export default {
  name: 'FormProcessTODOList',
  props: {
    formId: {
      type: String,
      default: undefined
    },
  },
  data() {
    return {
      sortConfig: {
        prop: 'createTime',
        order: 'descending',
      },
      type: 'all',
      loading: false,
      pageOptions,
      searchParams: {
        title: undefined
      },
      toDoList: [],
      selectedRows: [],
      pagination: {
        current: 1,
        size: 10,
        total: 400,
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.search();
    });
  },
  methods: {
    isEmpty,
    search() {
      if (isEmpty(this.formId)) return;
      this.loading = true;
      getAction('/plat/formFlow/todo/page', {
        formId: this.formId,
        ...this.pagination, ...this.searchParams,
        ...resolveOrderConfig(this.sortConfig)
      })
      .then(data => {
        this.loading = false;
        if (data.success) {
          let result = data.result;
          this.setSearchResult(result);
        }
      });
    },
    removeUserTaskByIds() {
      let ids = this.selectedRows.map(row => row.id);
      if (isEmpty(ids)) return;
      ids = ids.toString();

      ElMessageBox.confirm('删除后不可恢复, 确定删除吗', '确定删除?', {
        draggable: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteAction('/flow/removeUserTaskByIds', {ids}).then(data => {
          if (data.success) {
            this.selectedRows.splice(0, this.selectedRows.length);
            this.search();
          }
        });
      }).catch(() => {
      });
    },
    setSearchResult(result) {
      this.pagination.total = result.total;
      this.pagination.size = result.size;
      this.pagination.current = result.current;
      this.toDoList = result.records;
    },
    resetQueryParams() {
      this.searchParams = {
        title: undefined
      };
      this.pagination.current = 1;
      this.search();
    },
    searchDatas() {
      this.pagination.current = 1;
      this.search();
    },
    handleSizeChange() {
      this.pagination.current = 1;
      this.search();
    },
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows;
    },
    toApprove(rowData) {
      let viewActionId = getViewActionId(rowData);
      let url = `/plat/work/approve?viewActionId=${viewActionId}&businessId=${rowData.businessId}&userTaskId=${rowData.userTaskId}&fullScreen=1`;
      this.$windowManager.open(url, {
        close: () => {
          this.search();
        }
      });
    },
    sortChange(sortConfig) {
      this.sortConfig = sortConfig;
      this.search();
    },
    handleCurrentChange() {
      this.search();
    },
  },
  watch: {
    formId() {
      this.$nextTick(() => {
        this.search();
      });
    },
  }
};
</script>
